<template>
  <ECharts ref="chart" :id="id" :class="className" :style="{ height: height }"></ECharts>
</template>
<script>
import echarts from 'echarts'
import { h, defineComponent, ref, onMounted, defineProps } from 'vue'
import { createComponent } from 'echarts-for-vue'
import ResizeObserver from 'resize-observer-polyfill'
import { getKdaInList } from '@/utils/dotaHelper'
export default defineComponent({
  components: {
    ECharts: createComponent({ echarts, h, ResizeObserver }),
  },
})
</script>
<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'chart',
  },
  id: {
    type: String,
    default: 'chart',
  },
  height: {
    type: String,
    default: '200px',
  },
  recentMatches: {
    type: Array,
  },
})
const getAverageInListByKey = (list, key) => {
  if (list.length > 0) {
    let sum = 0
    for (let i = 0; i < list.length; i++) {
      sum += list[i][key]
    }
    return Math.round(sum / list.length)
  } else {
    return 0
  }
}
const getKadScore = (kad) => {
  if (kad > 5) {
    return 10
  } else {
    return Math.round(kad / 0.5)
  }
}

const getLiveScore = (deaths) => {
  if (deaths === 0) {
    return 10
  } else if (deaths > 20) {
    return 0
  } else {
    return Math.round((20 - deaths) / 2)
  }
}

const getHeroDamageScore = (heroDamage) => {
  if (heroDamage > 25000) {
    return 10
  } else {
    return Math.round(heroDamage / 2500)
  }
}

const getTowerDamageScore = (towerDamage) => {
  if (towerDamage > 6000) {
    return 10
  } else {
    return Math.round(towerDamage / 600)
  }
}

const getFarmScore = (farm) => {
  if (farm > 650) {
    return 10
  } else {
    return Math.round(farm / 65)
  }
}

const getLevel = (score) => {
  if ([10].includes(score)) {
    return 'S'
  } else if ([9].includes(score)) {
    return 'A'
  } else if ([8].includes(score)) {
    return 'B'
  } else if ([7].includes(score)) {
    return 'C'
  } else if ([5, 6].includes(score)) {
    return 'D'
  } else if ([3, 4].includes(score)) {
    return 'E'
  } else {
    return 'F'
  }
}

const chart = ref(null)
onMounted(() => {
  const kad = getKdaInList(props.recentMatches)
  const kadScore = getKadScore(kad)
  const kadLevel = getLevel(kadScore)
  const deaths = getAverageInListByKey(props.recentMatches, 'deaths')
  const liveScore = getLiveScore(deaths)
  const liveLevel = getLevel(liveScore)
  const heroDamage = getAverageInListByKey(props.recentMatches, 'hero_damage')
  const heroDamageScore = getHeroDamageScore(heroDamage)
  const heroDamageLevel = getLevel(heroDamageScore)
  const towerDamage = getAverageInListByKey(props.recentMatches, 'tower_damage')
  const towerDamageScore = getTowerDamageScore(towerDamage)
  const towerDamageLevel = getLevel(towerDamageScore)
  const farm = getAverageInListByKey(props.recentMatches, 'gold_per_min')
  const farmScore = getFarmScore(farm)
  const farmLevel = getLevel(farmScore)
  const totalScore = Math.round(
    (kadScore + liveScore + heroDamageScore + towerDamageScore + farmScore) / 5
  )
  const totalLevel = getLevel(totalScore)

  const indicator = [
    {
      name: `综合(${totalLevel})`,
      max: 10,
    },
    {
      name: `KAD(${kadLevel})`,
      max: 10,
    },
    {
      name: `战斗力(${heroDamageLevel})`,
      max: 10,
    },
    {
      name: `发育(${farmLevel})`,
      max: 10,
    },
    {
      name: `推进(${towerDamageLevel})`,
      max: 10,
    },
    {
      name: `生存(${liveLevel})`,
      max: 10,
    },
  ]

  const data = [
    {
      value: [
        totalScore,
        kadScore,
        heroDamageScore,
        farmScore,
        towerDamageScore,
        liveScore,
      ],
      lineStyle: {
        color: 'rgb(200,79, 63)',
        width: 0,
      },
      itemStyle: {
        opacity: 0
      }
    },
  ]
  chart.value.setOption({
    radar: {
      radius: '60%',
      splitNumber: 5,
      axisLine: {
        lineStyle: {
          color: '#909399',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#909399',
        },
      },
      splitArea: {
        areaStyle: {
          color: 'white',
          opacity: 1,
        },
      },
      indicator,
    },
    series: [
      {
        type: 'radar',
        areaStyle: {
          color: '#606266',
        },
        data,
      },
    ],
    color: ['#909399'],
  })
})
</script>
<style lang="scss" scoped>
.item {
  margin-top: 20px;
  span {
    font-size: 14px;
  }
}
</style>
